<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <div v-loading="loading">
        <a-form-model ref="smsForm" :rules="rules" :model="setting" :labelCol="{ span: 3 }" :wrapperCol="{ span: 12 }">
          <a-form-model-item label="SecretId" prop="secretId">
            <a-input v-model="setting.secretId" />
          </a-form-model-item>
          <a-form-model-item label="腾讯云密钥" prop="secretKey">
            <a-input v-model="setting.secretKey" />
          </a-form-model-item>
          <a-form-model-item label="图库区域" prop="region">
            <a-select v-model="setting.region">
              <a-select-option value="ap-beijing"> ap-beijing </a-select-option>
              <a-select-option value="ap-guangzhou"> ap-guangzhou </a-select-option>
              <a-select-option value="ap-shanghai"> ap-shanghai </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="是否开启" prop="status">
            <a-radio-group v-model="setting.status">
              <a-radio :value="1">开启</a-radio>
              <a-radio :value="0">关闭</a-radio>
            </a-radio-group>
          </a-form-model-item>

          <a-form-model-item :wrapper-col="{ span: 24 }">
            <a-divider style="margin: 0 0 40px 0" />
            <div style="display: flex; justify-content: center">
              <a-button :loading="btnLoading" type="primary" @click="submitForm" style="margin-right: 8px">
                保存
              </a-button>
              <a-button @click="$router.back()"> 取消 </a-button>
            </div>
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getSetting, saveSetting } from '@/api/imageSearch'

export default {
  name: 'TencentSetting',
  data() {
    return {
      loading: false,
      btnLoading: false,
      setting: {
        secretId: '',
        secretKey: '',
        region: '',
        status: 0,
      },
      rules: {
        secretId: [
          {
            required: true,
            message: '请输入阿里云AccessKeyId',
            trigger: 'blur',
          },
        ],
        secretKey: [
          {
            required: true,
            message: '请输入阿里云AccessKeySecret',
            trigger: 'blur',
          },
        ],
        region: [{ required: true, message: '请输入阿里云模版签名', trigger: 'blur' }],
        status: [{ required: true, message: '请选择', trigger: 'change' }],
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData: function () {
      this.loading = true
      getSetting({})
        .then((res) => {
          if (res.code == 0) {
            this.setting = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },

    submitForm: function () {
      this.$refs.smsForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          saveSetting(this.setting)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('保存成功！')
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
        }
      })
    },
  },
}
</script>

<style scoped></style>
